<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import hljs from 'highlight.js/lib/core';
import csharp from 'highlight.js/lib/languages/csharp';
import 'highlight.js/styles/monokai.min.css';


const props = defineProps<{
  code: string
  language: string
}>()

const codeViewRef = ref<HTMLElement | null>(null)
const innerCode = ref("");

onMounted(() => {
  hljs.registerLanguage('csharp', csharp);
  if (codeViewRef.value) {
    innerCode.value = hljs.highlight(props.code, { language: props.language }).value;
  }
})

watch(() => props.code, () => {
  innerCode.value = hljs.highlight(props.code, { language: props.language }).value;
})
</script>

<template>
  <div class="code-view">
    <pre><code :class="language" ref="codeViewRef" v-html="innerCode"></code></pre>
  </div>
</template>

<style scoped>
.code-view {
  font-size: 16px;
  background-color: #272822;
  border-radius: 8px;
  padding: 5px 15px 5px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: auto;
  max-height: 82.8vh;
}

pre {
  margin: 0;
}
</style>